<template>
  <div class="h-full bg-grey">
    <van-nav-bar class="bg-red text-white" title="会员预定"></van-nav-bar>
    <router-link tag="div" to="/order/search" class="p-10 bg-red">
      <VSearch content="输入商品名搜索" />
    </router-link>
    <!-- 订单列表 -->
    <van-skeleton :row="5" :loading="!ready" class="m-t-20">
      <van-list
        v-model="listControl.loading"
        :finished="listControl.pages === 0 || listPage.current === listControl.pages"
        finished-text="没有更多了"
        @load="getMoreData()"
        :immediate-check="false"
      >
        <order-list :list="list"></order-list>
      </van-list>
    </van-skeleton>
    <empty-data class="text-center m-t-20" v-if="!list.length && ready" content="暂无数据"></empty-data>
  </div>
</template>

<script>
import VSearch from '@/components/VSearch'
import OrderList from '@/views/Order/components/OrderList'
export default {
  data () {
    return {
      ready: false,
      status: [1],
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      }
    }
  },
  components: {
    VSearch,
    OrderList
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.listControl.loading = true
      let { page } = await this.$api.post('/xf/business/query', {
        size: 10,
        current: this.listPage.current,
        status: this.status
      })
      if (status === 401) return
      this.list = [...this.list, ...page.records]
      this.listPage.current = page.current
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.ready = true
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
